<template>
	<div>
		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/people'}">运维人员</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="body">
			<el-row :gutter="10" type="flex" justify="space-between" align="middle">
				<!-- 左边的运维人员 -->
				<el-col :span="4">
					<span>运维人员</span>
				</el-col>

				<!-- 右边的输入框和按钮 -->
				<el-col :span="16">
					<el-row :gutter="10" type="flex" justify="end" align="middle">
						<el-col :span="6">
							<el-input placeholder="请输入关键字搜索" size="small" v-model="form.searchKey"
								@input="filterTableData"></el-input>
						</el-col>
						<el-col :span="2">
							<el-button type="primary" size="small" @click="advancedSearch">高级搜索</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="success" size="small" @click="addNew">新增</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="warning" size="small" @click="editSelected">编辑</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" @click="submitSelected">提交</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" @click="processSelected">处理</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" @click="deleteSelected">删除</el-button>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			</div>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					searchKey: "",
					pageNum: 1,
					pageSize: 2
				}
				
		}
		},
		methods: {
			advancedSearch() {
			
			},
			addNew() {
			
			},
			editSelected() {
				if (this.selectedRows.length === 1) {
					this.editRow(this.selectedRows[0]);
				} else {
					this.$message.warning("请选择一条记录进行编辑");
				}
			},
			submitSelected() {
				if (this.selectedRows.length > 0) {
					// 实现提交逻辑
					console.log("提交", this.selectedRows);
				} else {
					this.$message.warning("请选择记录进行提交");
				}
			},
			processSelected() {
				if (this.selectedRows.length > 0) {
					// 实现处理逻辑
					console.log("处理", this.selectedRows);
				} else {
					this.$message.warning("请选择记录进行处理");
				}
			},
			deleteSelected() {
				if (this.selectedRows.length > 0) {
					// 实现删除逻辑
					console.log("删除", this.selectedRows);
				} else {
					this.$message.warning("请选择记录进行删除");
				}
			},
			filterTableData() {
				this.filteredTableData = this.tableData.list.filter(row =>
					row.username.includes(this.form.searchKey) ||
					row.name.includes(this.form.searchKey)
				);
			},
			handleSelectionChange(selection) {
				this.selectedRows = selection;
			},
			handleClick(row) {
				this.editRow(row);
			},
			editRow(row) {
				this.pojo = {
					...row
				};
				this.dialogFormVisible = true;
			},
			deleteRow(id) {
				// 实现删除逻辑
				console.log("删除", id);
			},
			updateRow() {
				// 实现更新逻辑
				console.log("更新", this.pojo);
				this.dialogFormVisible = false;
			},
			
			handleSizeChange(val) {
				this.form.pageSize = val;
				this.filterTableData();
			},
			handleCurrentChange(val) {
				this.form.pageNum = val;
				this.filterTableData();
			},
			
			
			
		},
		created() {
			this.filterTableData();
		}
	};
</script>

<style scoped>
	.title {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;
	}

	.body {
		margin-left: 30px;
	}

	.el-input {
		width: 100%;
	}

	.block {
		margin-top: 20px;
		text-align: center;
	}

	.dialog-footer {
		text-align: right;
	}
</style>